<template>
  <div class="login">
    <div class="clearfix">
      <div class="head">

      </div>
      <div class="swiper">

      </div>
      <div class="login-wrap">
        <div class="box">
          <div class="register-box" v-show="type == 'register'">
            <el-form :model='registerInfo' :rules='registerRules' ref='registerInfo'>
              <div class="login-title">免费注册</div>
              <el-form-item prop='userName'>
                <el-input v-model="registerInfo.userName" placeholder="请设置用户名">

                </el-input>
              </el-form-item>
              <el-form-item prop='password'>
                <el-input v-model="registerInfo.password" placeholder="请设置密码" show-password>

                </el-input>
              </el-form-item>
              <el-form-item prop='confirmpassword'>
                <el-input v-model="registerInfo.confirmpassword" placeholder="请再次输入密码" show-password>

                </el-input>
              </el-form-item>
              <div class="reg-agree">
                <label>
                  <input type="checkbox" class="check-box" v-model="registerInfo.regAgree" />
                  同意xx的
                  <a href="" target="_blank" class="">《服务条款》</a>和
                  <a href="" target="_blank" class="">《版权声明》</a>
                </label>
              </div>
              <el-button type="primary" style='width: 100%;' @click='getRegister'>提交</el-button>
              <div class="login-direct">
                <a @click="type = 'login'">已是会员，直接登入></a>
              </div>
            </el-form>
          </div>
          <div class="login-box" v-show="type == 'login'">
            <el-form :model="loginInfo" :rules='loginRules' ref='loginInfo'>
              <div class="login-title">自定义设计</div>
              <el-form-item prop='userName'>
                <el-input v-model="loginInfo.userName" placeholder="请输入用户名">

                </el-input>
              </el-form-item>
              <el-form-item prop='password'>
                <el-input v-model="loginInfo.password" placeholder="请输入登入密码" show-password>

                </el-input>
              </el-form-item>
              <el-form-item prop='code'>
                <el-input v-model="loginInfo.code" placeholder="请输入验证码" class='code-input'>

                </el-input>
                <div class="code-img">
                  <img :src="codeImg" @click="getIdentifyCOde" />
                </div>
              </el-form-item>
              <div class="login-tip">
                <div class="new-reg" @click="type = 'register'">新用户注册</div>
                <div class="forget-psd">忘记密码？</div>
              </div>

              <el-button type="primary" style='width: 100%;' @click='getLogin'>登入</el-button>
            </el-form>
          </div>
        </div>
      </div>
      <div class="foot">
        <div class="feature">

        </div>
        <ul class="foot-ul flex-center flex">
          <li class="foot-li">
            <h1>新手指南</h1>
            <a>新手教程</a>
            <a>新手教程</a>
            <a>新手教程</a>
          </li>
          <li class="foot-li">
            <h1>新手指南</h1>
            <a>新手教程</a>
            <a>新手教程</a>
            <a>新手教程</a>
          </li>
          <li class="foot-li">
            <h1>新手指南</h1>
            <a>新手教程</a>
            <a>新手教程</a>
            <a>新手教程</a>
          </li>
          <li class="foot-li">
            <h1>新手指南</h1>
            <a>新手教程</a>
            <a>新手教程</a>
            <a>新手教程</a>
          </li>
          <li class="foot-li">
            <h1>新手指南</h1>
            <a>新手教程</a>
            <a>新手教程</a>
            <a>新手教程</a>
          </li>
          <li class="foot-li">
            <p style="padding: 12px 0;">
              <a href="/">
                <img src="./logo.png" />
              </a>
            </p>
            <p class="mt5">
              联系我们
              <a class="mail">huazai@yy.com.cn</a>
            </p>
            <p class="mt5">
              商务合作
              <a class="mail">huazai@yy.com.cn</a>
            </p>
          </li>
        </ul>
        <div class="declare">
          © 2019 XX科技 版权所有.
          <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action" target="_blank">闽ICP备00000000号-1</a>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    components: {

    },
    data() {
      // -密码二次校验规则
      const comfirmPsd = (rule, value, callback) => {
        if (!value) {
          callback('请再次输入密码么')
        } else {
          if (this.registerInfo.password !== value) {
            callback(new Error('两次密码输入不一致'))
          }
        }
      };


      return {
        // -判断登入还是注册
        type: 'login', // -register/login
        loginInfo: {
          userName: '',
          password: '',
          code: '',
        },
        loginRules: {
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
        },
        registerInfo: {
          userName: '',
          password: '',
          confirmpassword: '',
          regAgree: true,
        },
        registerRules: {
          userName: [{
            required: true,
            message: '请设置用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请设置密码',
            trigger: 'blur'
          }],
          confirmpassword: [{
            required: true,
            trigger: 'blur',
            validator: comfirmPsd,
          }],
        },
        codeImg: "", // -验证码图片
      }
    },
    created() {
      this.getIdentifyCOde();
    },
    methods: {
      getIdentifyCOde: function() {
        this.$get(this.$apiUrl.common.identifyCode, {

        }).then((res) => {
          this.codeImg = res.kaptchaBase64;
          console.log(this.codeImg)
        })
      },
      getRegister: function() {
        if (!this.registerInfo.userName) {
          this.$message.error('请设置用户名');
          return
        }
        if (!this.registerInfo.password) {
          this.$message.error('请设置密码');
          return
        }
        if (this.registerInfo.password !== this.registerInfo.confirmpassword) {
          this.$message.error('两次密码输入不一致');
          return
        }
        if (!this.registerInfo.regAgree) {
          this.$message.warning('请阅读相应条款，并同意');
          return
        }
        this.$post(this.$apiUrl.common.register, {
          "email": "",
          "password": this.registerInfo.password,
          "telephone": "",
          "userName": this.registerInfo.userName,
        }).then((res) => {
          this.type = 'login';
        })
      },
      getLogin: function() {
        if (!this.loginInfo.userName) {
          this.$message.error('请输入用户名');
          return
        }
        if (!this.loginInfo.password) {
          this.$message.error('请输入密码');
          return
        }
        if (!this.loginInfo.code) {
          this.$message.error('请输入验证码');
          return
        }
        this.$router.push('/home')
        // this.$post(this.$apiUrl.common.login, {
        //   'userName': this.loginInfo.userName,
        //   'password': this.loginInfo.password,
        //   'code': this.loginInfo.code,
        // }).then((res) => {
        //   this.$session.setItem('token', res['Access-Token']);
        //   this.$session.setItem('user', res.user)

        // })
      }
    },
  }
</script>

<style lang="less" scoped="scoped">
  .login {
    .head {
      display: flex;
      height: 40px;
      background: #F5F3F8;
    }

    .swiper {
      width: 100%;
      position: relative;
      cursor: default;
      height: 560px;
      overflow: hidden;
      margin: 0 auto;
      background: url("login-bg.png") center;
      background-size: cover;
    }

    .login-wrap {
      width: 1185px;
      margin: 0 auto;
      position: absolute;
      top: 60px;
      left: 50%;
      z-index: 99;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);

      .box {
        background-color: rgb(255, 255, 255);
        position: absolute;
        width: 390px;
        right: 50px;
        top: 30px;
        z-index: 99;

        .login-box,
        .register-box {
          padding: 40px 45px;

          .login-title {
            font-size: 16px;
            color: rgb(20, 171, 244);
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
          }

          .login-tip {
            margin-bottom: 40px;

            .new-reg {
              font-size: 14px;
              color: rgb(20, 171, 244);
              text-decoration: underline;
              display: inline-block;
              cursor: pointer;
            }

            .forget-psd {
              font-size: 14px;
              float: right;
              cursor: pointer;
            }
          }

          .code-input {
            width: 50%;
          }

          .code-img {
            cursor: pointer;
            width: 110px;
            height: 40px;
            float: right;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .reg-agree {
            margin-top: 10px;
            margin-bottom: 20px;

            .check-box {
              margin-right: 5px;
              vertical-align: middle !important;
            }

            a {
              color: #3A8DE4;
            }
          }

          .login-direct {
            margin-top: 20px;
            text-align: right;
          }
        }
      }
    }

    .foot {
      background: #3d3d3f;
      padding-bottom: 15px;
      width: 100%;

      .feature {
        background: #e9f3ff;
        font-size: 14px;
        padding: 10px 0;
        width: 100%;
        height: 110px;
      }

      .foot-ul {
        padding-top: 30px;

        .foot-li {
          width: 200px;
          display: inline-block;

          h1 {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
          }

          a {
            display: table;
            line-height: 24px;
            text-decoration: none;
          }

          p {
            .mt {
              margin-top: 5px;
            }

            img {
              width: 134px;
              height: 26px;
            }

            a {
              display: inline-block;
            }
          }
        }
      }

      .foot-ul * {
        color: #FFFFFF;
      }

      .declare {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        white-space: nowrap;
        margin: 50px auto 0;
        color: #787878;
        text-align: center;

        a {
          color: #787878;
          cursor: pointer;
          text-decoration: none;
        }
      }
    }
  }
</style>
